<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抢养修护</title>
    <!-- 大盒子外联样式 -->
    <link rel="stylesheet" href="../css/06-pic.css">
    <!-- 图标外联样式 -->
    <link rel="stylesheet" href="../font/iconfont.css">
    <!-- 图标 -->
    <script src="../js/echarts1.js"></script>
    <!-- 分页 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>
    <script src="../js/03-ajax的封装.js"></script>

    <!-- 使用百度地图api -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=tfD85YZlgokKmLkD4PjZB4lZFxhr4VyK"></script>
</head>

<body>
    <!-- 最大的盒子 -->
    <div class="box">
        <!-- 背景地图 -->
        <div class="map">

            <!-- 地图容器 -->
            <div id="container"></div>

            <script>
                var map = new BMapGL.Map("container"); // 创建地图实例 
                var point = new BMapGL.Point(113.823024, 34.79473); // 创建点坐标 
                map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                map.setHeading(64.5); //设置地图旋转角度
                map.setTilt(73); //设置地图的倾斜角度

                var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
                map.addControl(scaleCtrl);
                var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
                map.addControl(zoomCtrl);

                var marker = new BMapGL.Marker(point); // 创建标注   
                map.addOverlay(marker); // 将标注添加到地图中
                map.setMapStyleV2({
                    styleId: '4460912dccb85a7bcfcdd055449b0407'
                });
            </script>

        </div>
        <!-- 盒子内部上下分三部分，分别为box1,box2,box3 -->
        <div class="box1">
            <div class="nav1">
                <div class="nav2"><i>排水管网GIS综合应用系统</i></div>
            </div>
            <div class="nav">
                <div class="navbar0"><a href="0.html">首页</a>
                    <div class="tri"></div>
                </div>
                <!-- 第一个 -->
                <div class="navbar0"><a href="2.html">地图操作</a>
                    <div class="tri"></div>
                </div>
                <!-- 第二个 -->
                <div class="navbar0" , id="query"><a href="3.html">管网查询</a>
                    <div class="tri"></div>
                </div>
                <!-- 第三个 -->
                <div class="navbar0"><a href="4.html">管网统计</a>
                    <div class="tri"></div>
                </div>
                <!-- 第四个 -->
                <div class="navbar0"><a href="5.html">巡检查询</a>
                    <div class="tri"></div>
                </div>
                <!-- 第五个 -->
                <div class="navbar0 navbar1" id="qxyh"><a href="6.html">抢修养护</a>
                    <div class="tri"></div>
                </div>
                <!-- 第六个 -->
                <div class="navbar0"><a href="7.html">图档管理</a>
                    <div class="tri"></div>
                </div>
                <!-- 第七个 -->
                <div class="navbar0"><a href="8.html">企业管理</a>
                    <div class="tri"></div>
                </div>
                <!-- 第八个 -->
                <div class="navbar0"><a href="9.html">窨井管理</a>
                    <div class="tri"></div>
                </div>
                <!-- 第九个 -->
                <div class="navbar0"><a href="10.html">泵站管理</a>
                    <div class="tri"></div>
                </div>

                <div class="tubiao">
                    <span class="iconfont icon-shezhixitongshezhigongnengshezhishuxing" id="shezhi"></span>
                    <span class="iconfont icon-yonghu" id="yonghu">&nbsp;admin</span>
                    <span class="iconfont icon-exit-full" id="exit"></span>
                </div>
                <!-- 第十个 -->

            </div>
            <!-- 指南针 -->
            <div class="compass"></div>
            <div class="compass1"></div>
            <div class="tubiaobottom">
                <span class="iconfont icon-sousuo" id="sousuo"></span>
                <span class="iconfont icon-jia" id="jia"></span>
                <span class="iconfont icon-jianhao" id="jiahao"></span>
                <span><img src="../img/images/10010.png" alt=""></span>
                <span class="iconfont icon-fangzi1" id="fangzi"></span>
                <span class="iconfont icon-full-screen" id="jiantou"></span>
            </div>
        </div>
        <div class="box2">
            <!-- box2分为三部分，也分为三个盒子，分别为box21,box22,box23 -->

            <div class="box21">
                <!-- 表头 -->
                <div class="box211">
                    <div class="jiantou"></div>
                    <div class="title21">抢修养护计划</div>
                </div>

                <!-- 设置表盘图标 -->
                <div class="box213">
                    <div class="box2131" id="yibiao1"></div>
                    <div class="box2132" id="yibiao2"></div>
                    <div class="box2133" id="yibiao3"></div>
                </div>

                <!-- 表盘下方选项 -->
                <div class="box212">
                    <div class="box2121">统计报表</div>
                    <div class="box2122">
                        <select>
                            <option>状态</option>
                            <option>优</option>
                            <option>良</option>
                            <option>差</option>
                        </select>
                    </div>
                    <div class="box2123">
                        <select>
                            <option>抢修养护分队</option>
                            <option>分队一</option>
                            <option>分队二</option>
                            <option>分队三</option>
                            <option>分队四</option>
                        </select>
                    </div>


                </div>
                <!-- 计划-zhy -->
                <div class="box214">
                    <div class="box2141">
                        <div class="pox1">计划-zhy</div>
                        <div class="pox2">待派发</div>
                    </div>
                    <div class="box2142">
                        <div class="pox3">抢修养护计划：管线计划</div>
                        <div class="pox4">0.00%</div>
                    </div>
                    <div class="box2143">
                        抢修养护点：ZZDDWS940至ZZDDWS938
                    </div>
                    <div class="box2144">
                        <div class="pox5">巡检周期：2023/10/27-2023/10/31</div>
                        <div class="pox6">详情></div>
                    </div>
                </div>
            </div>
            <!-- 第二排box22的设计 -->
            <div class="box22">
                <!-- 头部信息 -->
                <div class="box221">
                    <div class="jiantou2"></div>
                    <div class="title22">抢修养护计划详情</div>
                </div>
                <div class="box222">
                    <div class="zhixing1">
                        <div class="box2221">
                            <div class="mox1">zhy</div>
                            <div class="mox2">未提交</div>
                        </div>
                        <div class="box2222">抢修养护计划编号：006</div>
                        <div class="box2222">任务类型：管线计划</div>
                        <div class="box2222">巡检事项：</div>
                        <div class="box2222">抢修养护开始时间：2023/10/27</div>
                        <div class="box2222">抢修养护结束时间：2023/10/31</div>
                        <div class="box2222">抢修养护人：huajintesttest1wisdom</div>

                    </div>
                    <div class="zhixing2">
                        <div class="box2223">抢修养护点</div>

                    </div>
                </div>
            </div>
            <!-- 插入视频 -->
            <div class="box23"><video src="../img/视频.mp4" controls></video></div>
        </div>
        <!-- 第三大块，细分为巡检监控，轨迹回放 -->
        <div class="box3">
            <!-- 巡检监控 -->
            <div class="box31">
                <!-- 头部 -->
                <div class="box311">
                    <div class="jiantou3"></div>
                    <div class="title3">抢修养护监控</div>
                </div>
                <!-- 日期和查询 -->
                <div class="box312">
                    <div class="box3121">
                        <span class="iconfont icon-rili"></span>
                        <span>开始时间&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;结束时间</span>
                    </div>
                    <div class="box3122">
                        <span class="iconfont icon-sousuo"></span>
                        <span><input type="text" placeholder="请输入巡查人姓名" class="search"></span>
                    </div>
                    <div class="box3123"><input type="button" value="查询" class="but"></div>
                </div>
                <!-- 分页 -->
                <div class="box313">
                    <table class="table1" border="1" cellspacing="0" cellpadding="5">
                        <tr>
                            <td>序号</td>
                            <td>抢修养护人</td>
                            <td>最后登录位置</td>
                            <td>最后登录时间</td>
                            <td>状态</td>
                            <td>操作</td>

                        </tr>
                    </table>
                </div>
                <div class="box314">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>

                        </ul>
                    </nav>
                </div>


            </div>
            <!-- 轨迹回放 -->
            <div class="box32">
                <!-- 头部 -->
                <div class="box321">
                    <div class="jiantou4"></div>
                    <div class="title4">轨迹回放</div>
                </div>
                <!-- 日期和查询 -->
                <div class="box322">
                    <div class="box3221">
                        <span class="iconfont icon-rili"></span>
                        <span>开始时间&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;结束时间</span>
                    </div>
                    <div class="box3222">
                        <span class="iconfont icon-sousuo"></span>
                        <span><input type="text" placeholder="请输入巡查人姓名" class="search1"></span>
                    </div>
                    <div class="box3223"><input type="button" value="查询" class="but1"></div>
                </div>
                <!-- 分页 -->
                <div class="box323">
                    <table class="table2" border="1" cellspacing="0" cellpadding="5">
                        <tr>
                            <td>序号</td>
                            <td>巡检人</td>
                            <td>所属计划</td>
                            <td>巡检开始时间</td>
                            <td>巡检结束时间</td>
                            <td>操作</td>
                            <td>在线时长</td>
                        </tr>
                    </table>
                    <!-- <div class="look">查看轨迹</div>
                    <div class="send">导出</div> -->
                </div>
                <div class="box324">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>

                        </ul>
                    </nav>

                </div>

            </div>
        </div>
    </div>

    <script>
        //box2的渲染
        // box21中的表盘图标
        (function() {
            var chartDom = document.getElementById('yibiao1');
            var myChart = echarts.init(chartDom);
            var option;

            const gaugeData = [{
                value: 60,
                name: "计划总长(KM)",
                title: {
                    offsetCenter: ['0%', '0%'],
                    textStyle: {
                        fontSize: '16px',

                    }
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '40%']
                }
            }];
            option = {
                series: [{
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0eaafc'
                            }, {
                                offset: 1,
                                color: 'white'
                            }])
                        }
                    },

                    type: 'gauge',
                    //开始角度
                    startAngle: -90,
                    //结束角度
                    endAngle: 0,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        //仪表样式
                        itemStyle: {
                            // borderWidth: 1,
                            // borderColor: '#464646'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 10 //仪表宽度
                        }
                    },
                    //仪表刻度，不出现
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10
                    },
                    //仪表刻度，不出现
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 50
                    },
                    data: [{
                        value: 100,
                        // name: 'Commonly'
                    }],
                    title: {
                        fontSize: 14
                    },
                    detail: {
                        width: 50,
                        height: 14,
                        fontSize: 18,
                        color: 'white',
                        formatter: '9',
                        offsetCenter: ['0', '0']
                    }
                }]
            };

            option && myChart.setOption(option);

        }());
        (function() {
            var chartDom = document.getElementById('yibiao2');
            var myChart = echarts.init(chartDom);
            var option;

            const gaugeData = [{
                value: 60,
                // name: 'Commonly',
                title: {
                    offsetCenter: ['0%', '30%']
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '40%']
                }
            }];
            option = {
                series: [{
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00a58d'
                            }, {
                                offset: 1,
                                color: 'white'
                            }])
                        }
                    },

                    type: 'gauge',
                    //开始角度
                    startAngle: -90,
                    //结束角度
                    endAngle: 0,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        //仪表样式
                        itemStyle: {
                            // borderWidth: 1,
                            // borderColor: '#464646'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 10 //仪表宽度
                        }
                    },
                    //仪表刻度，不出现
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10
                    },
                    //仪表刻度，不出现
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 50
                    },
                    data: [{
                        value: 100,
                        // name: 'Commonly'
                    }],
                    title: {
                        fontSize: 14
                    },
                    detail: {
                        width: 50,
                        height: 14,
                        fontSize: 18,
                        color: 'white',

                        formatter: '0',
                        offsetCenter: ['0', '0']
                    }
                }]
            };

            option && myChart.setOption(option);

        }());
        (function() {
            var chartDom = document.getElementById('yibiao3');
            var myChart = echarts.init(chartDom);
            var option;

            const gaugeData = [{
                value: 60,
                // name: 'Commonly',
                title: {
                    offsetCenter: ['0%', '30%']
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '40%']
                }
            }];
            option = {
                series: [{
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'orange'

                            }, {
                                offset: 1,
                                color: 'white'
                            }])
                        }
                    },

                    type: 'gauge',
                    //开始角度
                    startAngle: -90,
                    //结束角度
                    endAngle: 0,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        //仪表样式
                        itemStyle: {
                            // borderWidth: 1,
                            // borderColor: '#464646'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 10 //仪表宽度
                        }
                    },
                    //仪表刻度，不出现
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10
                    },
                    //仪表刻度，不出现
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 50
                    },
                    data: [{
                        value: 100,
                        // name: 'Commonly'
                    }],
                    title: {
                        fontSize: 14
                    },
                    detail: {
                        width: 50,
                        height: 14,
                        fontSize: 18,
                        color: 'white',
                        formatter: '0',
                        offsetCenter: ['0', '0']
                    }
                }]
            };

            option && myChart.setOption(option);

        }());

        // 巡检监控分页处理
        // 封装渲染表格的函数
        function tabFun1(page, sixpic) {
            var table1 = document.getElementsByClassName("table1")[0];
            // 每次渲染都要初始化一下表格，只剩下表头
            table1.innerHTML = `<table class="table1" border="1" cellspacing="0" cellpadding="5">
                                <tr>
                                    <td>序号</td>
                                    <td>抢修养护人</td>
                                    <td>最后登录位置</td>
                                    <td>最后登录时间</td>
                                    <td>状态</td>
                                    <td>操作</td>
                                </tr>
                               </table>`;
            // 进行一次判断（三目判断），判断当前页还够不够数据的渲染
            for (var i = 0; i < 3; i++) {
                table1.innerHTML += `<tr>
                                        <td>${sixpic.conserve[i].id}</td>
                                        <td>${sixpic.conserve[i].name}</td>
                                        <td>${sixpic.conserve[i].lastlocation}</td>
                                        <td>${sixpic.conserve[i].lasttime}</td>
                                        <td>${sixpic.conserve[i].laststatus}</td>
                                        <td class="dingwei">${sixpic.conserve[i].operate}</td>
                                    </tr>`
            }
        }

        ajaxFun("../json/sixpic.json", function(sixpic) {
            sixpic = JSON.parse(sixpic);
            console.log(sixpic);
            // 得到总的数据数
            var num = sixpic.conserve.length;
            console.log(num);
            // 根据总的数据数得到页数
            var pageNum = Math.ceil(num / 3);
            console.log(pageNum);
            // 获取分页元素
            var pagination = document.getElementsByClassName("pagination")[0];
            // 循环渲染
            for (var i = 1; i <= pageNum; i++) {
                pagination.innerHTML += `<li class="page-item"><a class="page-link" href="#">${i}</a>`
            }
            pagination.innerHTML += `<li class="page-item">
                                        <a class="page-link" href="#" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                     </li>`;
            tabFun1(1, sixpic);
            // 实现查询功能
            // 搜索部分
            // 获取搜索框和搜索按钮
            var inp = document.getElementsByClassName("search")[0];
            var btn = document.getElementsByClassName("but")[0];

            // 准备一个空数组，用来保存符合搜索条件的数据
            var newData = [];

            btn.onclick = function() {
                var table1 = document.getElementsByClassName("table1")[0];
                console.log(table1);
                table1.innerHTML = `<table class="table1" border="1" cellspacing="0" cellpadding="5">
                                <tr>
                                    <td>序号</td>
                                    <td>抢修养护人</td>
                                    <td>最后登录位置</td>
                                    <td>最后登录时间</td>
                                    <td>状态</td>
                                    <td>操作</td>
                                </tr>
                               </table>`;

                // 拿到输入框的内容
                console.log(sixpic.conserve);

                // 遍历对应的数据
                for (var i = 0; i < sixpic.conserve.length; i++) {
                    // 对象的遍历
                    for (var key in sixpic.conserve[i]) {
                        // console.log(key);
                        // 可以拿到对应的值
                        console.log(sixpic.conserve[i][key]);

                        // 将值和搜索框的内容进行比对
                        if (sixpic.conserve[i][key].toString().includes(inp.value)) {
                            newData.push(sixpic.conserve[i]);
                            // 只要发现有符合所搜条件的内容，就直接终止遍历
                            break;
                        }
                    }
                }

                console.log(newData);
                // tabFun(page, newData);

                // 拿着符合条件的数据进行页面渲染
                for (var i = 0; i < newData.length; i++) {

                    table1.innerHTML += `<tr>
                                        <td>${newData[i].id}</td>
                                        <td>${newData[i].name}</td>
                                        <td>${newData[i].lastlocation}</td>
                                        <td>${newData[i].lasttime}</td>
                                        <td>${newData[i].laststatus}</td>
                                        <td class="dingwei">${newData[i].operate}</td>
                                    </tr>`;
                }

            }



            // 获取所有的分页元素
            var pageItem = document.getElementsByClassName("page-link");
            // 循环事件绑定（避开了上一页和下一页）
            for (var j = 1; j < pageItem.length - 1; j++) {
                pageItem[j].onclick = function() {
                    console.log(this.innerHTML);

                    // 调用渲染的函数，进行数据的渲染
                    tabFun1(this.innerHTML, sixpic);
                }
            }

        });



        // 轨迹回放分页处理
        // 封装渲染表格的函数
        function tabFun2(page, sixpic) {
            var table2 = document.getElementsByClassName("table2")[0];
            // 每次渲染都要初始化一下表格，只剩下表头
            table2.innerHTML = `<table  class="table2" border="1" cellspacing="0" cellpadding="5">
                                <tr>
                                    <td>序号</td>
                                    <td>巡检人</td> 
                                    <td>所属计划</td>
                                    <td>巡检开始时间</td>
                                    <td>巡检结束时间</td>
                                    <td>操作</td>
                                    <td>在线时长</td>
                                </tr>
                               </table>`;
            // 进行一次判断（三目判断），判断当前页还够不够数据的渲染
            for (var n = 0; n < 1; n++) {
                table2.innerHTML += `<tr>
                                        <td>${sixpic.replay[n].id}</td>
                                        <td>${sixpic.replay[n].name}</td>
                                        <td>${sixpic.replay[n].plan}</td>
                                        <td>${sixpic.replay[n].starttime}</td>
                                        <td>${sixpic.replay[n].lasttime}</td>
                                        <td><div class="operate">${sixpic.replay[n].operate}</div></td>
                                        <td><div class="ontime">${sixpic.replay[n].ontime}</div></td>
                                    </tr>`
            }
        }

        ajaxFun("../json/sixpic.json", function(sixpic) {
            sixpic = JSON.parse(sixpic);
            console.log(sixpic);
            // 得到总的数据数
            var num = sixpic.replay.length;
            console.log(num);
            // 根据总的数据数得到页数
            var pageNum = Math.ceil(num / 1);
            console.log(pageNum);
            // 获取分页元素
            var pagination1 = document.getElementsByClassName("pagination")[1];
            // 循环渲染
            for (var i = 1; i <= pageNum; i++) {
                pagination1.innerHTML += `<li class="page-item"><a class="page-link" href="#">${i}</a>`
            }
            pagination1.innerHTML += `<li class="page-item">
                                  <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                  </a>
                                </li>`;
            tabFun2(1, sixpic);

            // 实现查询功能
            // 搜索部分
            // 获取搜索框和搜索按钮
            var inp1 = document.getElementsByClassName("search1")[0];
            var btn1 = document.getElementsByClassName("but1")[0];

            // 准备一个空数组，用来保存符合搜索条件的数据
            var newData1 = [];

            btn1.onclick = function() {
                var table2 = document.getElementsByClassName("table2")[0];
                console.log(table2);
                table2.innerHTML = `<table  class="table2" border="1" cellspacing="0" cellpadding="5">
                                <tr>
                                    <td>序号</td>
                                    <td>巡检人</td> 
                                    <td>所属计划</td>
                                    <td>巡检开始时间</td>
                                    <td>巡检结束时间</td>
                                    <td>操作</td>
                                    <td>在线时长</td>
                                </tr>
                               </table>`;

                // 拿到输入框的内容
                console.log(sixpic.replay);

                // 遍历对应的数据
                for (var i = 0; i < sixpic.replay.length; i++) {
                    // 对象的遍历
                    for (var key in sixpic.replay[i]) {
                        // console.log(key);
                        // 可以拿到对应的值
                        console.log(sixpic.replay[i][key]);

                        // 将值和搜索框的内容进行比对
                        if (sixpic.replay[i][key].toString().includes(inp1.value)) {
                            newData1.push(sixpic.replay[i]);
                            // 只要发现有符合所搜条件的内容，就直接终止遍历
                            break;
                        }
                    }
                }

                console.log(newData1);
                // tabFun(page, newData);

                // 拿着符合条件的数据进行页面渲染
                for (var i = 0; i < newData1.length; i++) {

                    table2.innerHTML += `<tr>
                                        <td>${newData1[i].id}</td>
                                        <td>${newData1[i].name}</td>
                                        <td>${newData1[i].plan}</td>
                                        <td>${newData1[i].starttime}</td>
                                        <td>${newData1[i].lasttime}</td>
                                        <td>${newData1[i].operate}</td>
                                        <td>${newData1[i].ontime}</td>
                                        </tr>`;
                }

            }


            // 获取所有的分页元素
            var pageItem = document.getElementsByClassName("page-link");
            // 循环事件绑定（避开了上一页和下一页）
            for (var m = 1; m < pageItem.length - 1; m++) {
                pageItem[m].onclick = function() {
                    console.log(this.innerHTML);

                    // 调用渲染的函数，进行数据的渲染
                    tabFun2(this.innerHTML, sixpic);
                }
            }

        });
    </script>
</body>

</html>